<template>
  <div class="app">
    <el-card shadow="never">
      <div class="card">
        <div class="box">
          <span>工单编号:</span>
          <el-input v-model="input.taskCode" placeholder="请输入内容"></el-input>
        </div>
        <div class="box">
          <span>工单状态:</span>
          <el-select v-model="input.status" slot="prepend" placeholder="请选择">
            <el-option
              :label="item.statusName"
              :value="item.statusId"
              v-for="item in Status"
              :key="item.statusId"
            ></el-option>
          </el-select>
        </div>
        <el-button type="primary" icon="el-icon-search" @click="chaxun('查询')">查询</el-button>
      </div>
    </el-card>
    <el-card class="boxo" shadow="never">
      <div class="box2">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          class="one"
          @click="updateadd"
        >新建</el-button>
        <el-button class="two" v-if="show" @click="supplyAlert">工单配置</el-button>
      </div>
      <div class="box3">
        <el-table
          style="width: 100%"
          :header-cell-style="{ 'background-color':'#f3f6fb'}"
          :data="list"
          v-loading="loading"
        >
          <el-table-column label="序号" width="80" type="index"></el-table-column>
          <el-table-column label="工单编号" width="200" prop="taskCode"></el-table-column>
          <el-table-column label="设备编号" width="200" prop="innerCode"></el-table-column>
          <el-table-column label="工单类型" width="200" prop="typeName"></el-table-column>
          <el-table-column label="工单方式" width="200" prop="createType"></el-table-column>
          <el-table-column label="工单状态" width="200" prop="statusName"></el-table-column>
          <el-table-column label="运营人员" width="200" prop="userName"></el-table-column>
          <el-table-column label="创建日期" width="200" prop="createTime"></el-table-column>
          <el-table-column label="操作">
            <template #default="{row}">
              <span class="pp" @click="ckan(row)">查看详情</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="FooltList" v-if="button">
          <div class="left">
            共
            <span>{{ +total }}</span>条记录 第
            <span>{{ +pageIndex }}</span>
            / {{ +totalPage }}页
          </div>
          <div class="right" >
            <button
              ref="buttonL"
              :class="{ active: type === 1 }"
              @click="change(1, +pageIndex - 1,'改变')"
            >上一页</button>
            <button
              ref="buttonR"
              @click="change(2, +pageIndex + 1,'改变')"
              :class="{ active: type === 2 }"
            >下一页</button>
          </div>
        </div>
      </div>
    </el-card>
    <el-dialog
      title="新增工单"
      :visible="dialogFormVisible"
      :modal-append-to-body="false"
      :before-close="close"
      width="630px"
      :destroy-on-close="true"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="设备编号" label-width="120px" prop="innerCode">
          <el-input
            type="text"
            placeholder="请输入"
            v-model="form.innerCode"
            maxlength="15"
            show-word-limit
            style="width:400px"
          ></el-input>
        </el-form-item>
        <el-form-item label="工单类型" label-width="120px" prop="typeName">
          <el-select v-model="form.typeName" placeholder="请选择" style="width:400px">
            <el-option
              :label="item.typeName"
              :value="item.typeId"
              v-for="item in taplists"
              :key="item.typeId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="补货数量" style="margin-left: 60px;">
          <div style="color: #5f84ff;cursor: pointer;" @click="openbuhuo">
            <i class="el-icon-folder-opened"></i>
            <span>补货清单</span>
          </div>
        </el-form-item>
        <el-form-item label="运维人员" label-width="120px" prop="userName">
          <el-select v-model="form.userName" placeholder="请选择" style="width:400px">
            <div class="idiv" v-if="user">
              <el-option
                v-for="item in repairerList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userName"
              ></el-option>
            </div>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" label-width="120px" prop="textarea">
          <el-input
            type="textarea"
            placeholder="请输入备注"
            v-model="form.desc"
            maxlength="40"
            show-word-limit
            style="width:400px;"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close" class="two">取 消</el-button>
        <el-button type="primary" @click="submit" class="one">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="工单详情"
      :visible.sync="dialog"
      width="630px"
      :modal-append-to-body="false"
      :destroy-on-close="true"
      v-loading="loading"
    >
      <template #default>
        <div
          class="box777"
          style="wtdth:380px;background-color: #f8f8f8;height: 50px;display: flex;justify-content:space-between;"
        >
          <div class="box1" style="margin:12px 0 0 32px;">
            <img style="width:26px;height:26px" taskStatusTypeEntity.statusName :src="pic" alt />
            <div style="margin:-25px 30px;">
              <span style="font-size: 14px;">{{test}}</span>
            </div>
          </div>
          <div class="box2" style="margin-top: -16px;margin-right: 80px;">
            <img :src="tup" alt style="width:'88px';height:68px" />
          </div>
        </div>
        <div style="display: flex;justify-content:space-between;margin-top: 20px;">
          <div style="margin-left: 35px;">
            <span>设备编号:</span>
            <span style="display: inline-block;margin-left: 20px;">{{taskInfo.innerCode}}</span>
          </div>
          <div style="margin-right: 80px;">
            <span style>创建日期:</span>
            <span style="display: inline-block;margin-left: 20px;">{{taskInfo.createTime}}</span>
          </div>
        </div>
        <div style="display: flex;justify-content:space-between;margin-top: 20px;">
          <div style="margin-left: 35px;">
            <span v-if="form.statusName !== '待办'">取消日期:</span>
            <span
              v-if="form.statusName !== '待办'"
              style="display: inline-block;margin-left: 20px;"
            >{{taskInfo.updateTime}}</span>
          </div>
          <div style="margin-right: 150px;">
            <span style>运维人员:</span>
            <span style="display: inline-block;margin-left: 20px;">{{taskInfo.userName}}</span>
          </div>
        </div>
        <div style="display: flex;justify-content:space-between;margin-top: 20px;">
          <div style="margin-left: 35px;">
            <span>工单类型:</span>
            <span style="display: inline-block;margin-left: 20px;">{{taskInfo.typeName}}</span>
          </div>
          <div style="margin-right: 190px;">
            <span style>工单方式:</span>
            <span style="display: inline-block;margin-left: 20px;">手动</span>
          </div>
        </div>
        <div style="display: flex;justify-content:space-between;margin-top: 20px;">
          <div
            style="margin-left: 35px;"
            v-if="form.statusName === '取消' || form.statusName === '完成' || form.statusName === '待办'"
          >
            <span>{{form.statusName === '取消'? '取消原因':'备注'}}:</span>
            <span style="display: inline-block;margin-left: 20px;">{{taskInfo.desc}}</span>
          </div>
          <div style="margin-left: 35px;" v-if="form.statusName === '完成'">
            <span>定位:</span>
            <span style="display: inline-block;margin-left: 20px;">{{taskInfo.addr}}</span>
          </div>
        </div>
      </template>
      <div slot="footer" class="dialog-footer gg">
        <el-button
          type="primary"
          @click="hhh"
          style="background-color: #fbf4f0;border: none;color: #655b56!important;"
          v-if="form.statusName === '待办' && form.statusName !== '完成'"
        >取消工单</el-button>
        <el-button
          @click="sb"
          style="background-color: #fbf4f0;"
          v-if="form.statusName === '取消' && form.statusName !== '完成'"
        >重新创建</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="补货详情"
      :visible="FormVisible"
      :modal-append-to-body="false"
      :before-close="close"
      width="630px"
      :destroy-on-close="true"
    >
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{background:'#f3f6fb'}"
        height="400"
      >
        <el-table-column prop="channelCode" label="货道编号" width="120"></el-table-column>
        <el-table-column prop="brandName" :formatter="formatState1" label="商品名称" width="100"></el-table-column>
        <el-table-column prop="currentCapacity" label="当前数量" :formatter="formatState2" width="80"></el-table-column>
        <el-table-column prop="maxCapacity" label="还可添加" :formatter="formatState3" width="80"></el-table-column>
        <el-table-column label="补满数量" prop="yyy">
          <template #default="{row}">
            <el-input-number v-model="row.maxCapacity" controls-position="right" :max="10" :min="1"></el-input-number>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close" class="two">取 消</el-button>
        <el-button type="primary" @click="FormVisible = false" class="one">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="工单配置"
      :visible="Visible"
      :modal-append-to-body="false"
      :before-close="close"
      width="630px"
      :destroy-on-close="true"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="补充警戒线：" prop="num" label-width="80">
          <el-input-number
            v-model="form.num"
            controls-position="right"
            :min="1"
            :max="60"
            style="width:450px"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close" class="two">取 消</el-button>
        <el-button type="primary" class="one" @click="autoSupplyConfig">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  allTaskStatus,
  search,
  taplist,
  taskInfo,
  cancel,
  repairerList,
  create,
  channelList,
  supplyAlertValue,
  autoSupplyConfig
} from '@/api/business'
export default {
  name: 'DekedeIndex',
  props: {
    list: {
      type: Array,
      default: () => [],
      required: true
    },
    show: {
      type: Boolean
    },
    but: {
      type: Boolean
    },
    total: {
      type: [String, Number],
      default: '0'
    },
    pageIndex: {
      type: [String, Number],
      default: '1'
    },
    pageSize: {
      default: '10',
      type: [String, Number]
    },
    totalPage: {
      type: [String, Number],
      default: '0'
    },
    isRepair: {
      type: Boolean
    }
  },
  data () {
    return {
      str: '',
      button: true,
      val: 1,
      rules: {
        innerCode: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        typeName: [
          { required: true, message: '请选择工单类型', trigger: 'blur' }
        ],
        desc: [{ required: true, message: '请输入备注', trigger: 'blur' }],
        userName: [
          { required: true, message: '请选择运维人员', trigger: 'change' }
        ],
        num: [{ required: true, message: '请选择运维人员', trigger: 'change' }]
      },
      input: {},
      form: { num: 50 },
      Status: [],
      loading: false,
      dialogFormVisible: false,
      dialog: false,
      taplists: [],
      taskInfo: {},
      FormVisible: false,
      Visible: false,
      repairerList: [],
      user: false,
      tableData: [],
      type: 2,
      i: 0
    }
  },
  updated () {
    if (this.list.length === 0) {
      this.button = false
    } else {
      this.button = true
    }
  },
  created () {
    this.allTaskStatus()
    this.taplist()
  },
  methods: {
    // 上下一页
    change (num, val, ele) {
      this.str = ele
      console.log(num, val)
      if (this.val > this.totalPage) {
        this.$refs.buttonR.disabled = true
      } else {
        if (val >= 1) {
          this.$emit('update:pageIndex', val)
          this.type = num
          this.chaxun()
          this.val = val
          // console.log(val, this.i)
        } else if (val === 1) {
          this.$refs.buttonL.disabled = true
        } else {
          this.$refs.buttonL.disabled = false
          this.type = 2
        }
      }
    },
    formatState1 (row, column, cellValue) {
      // console.log(cellValue)
      if (cellValue !== undefined) {
        return cellValue
      } else {
        return '-'
      }
    },
    formatState2 (row, column, cellValue) {
      // console.log(cellValue)
      // console.log(row)
      if (row.brandName === undefined) {
        return '-'
      } else {
        return cellValue
      }
    },
    formatState3 (row, column, cellValue) {
      // console.log(cellValue)
      if (row.brandName === undefined) {
        return '-'
      } else {
        return cellValue
      }
    },
    // 工单状态列表
    async allTaskStatus () {
      const res = await allTaskStatus()
      // console.log(res)
      this.Status = res
    },
    // 获取所有工单类型
    async taplist () {
      const res = await taplist()
      this.taplists = res
      // console.log(res)
    },
    // 查询
    async chaxun (val) {
      // this.$emit('update:pageIndex', this.val)
      this.str = val
      if (this.str === '查询') {
        this.$emit('update:pageIndex', 1)
      }
      try {
        this.loading = true
        const res = await search({
          pageSize: this.pageSize,
          pageIndex: this.pageIndex,
          ...this.input,
          isRepair: this.isRepair
        })
        // console.log(res)
        this.searchList = res.currentPageRecords
        const b = []
        const a = this.searchList.map((item) => {
          // console.log(JSON.stringify(item.createTime).replace('T', ' '))
          b.push({
            taskCode: item.taskCode,
            userName: item.userName,
            createTime: JSON.parse(
              JSON.stringify(item.createTime).replace('T', ' ')
            ),
            statusName: item.taskStatusTypeEntity.statusName,
            typeName: item.taskType?.typeName,
            innerCode: item.innerCode,
            taskId: item.taskId,
            productType: item.productTypeId,
            createType: item.createType === 1 ? '手动' : '自动'
          })
          return b
        })
        this.$emit('update:list', a[0])
        this.$emit('update:pageIndex', this.val)
        this.$emit('update:pageSize', res.pageSize)
        this.$emit('update:totalPage', res.totalPage)
        this.$emit('update:total', res.totalCount)
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    // 查看详情
    async ckan (val) {
      try {
        this.loading = true
        this.dialog = true
        // console.log(val)
        const res = await taskInfo(val.taskId)
        this.taskInfo = res
        this.taskInfo.createTime = JSON.parse(
          JSON.stringify(this.taskInfo.createTime).replace('T', ' ')
        )
        this.taskInfo.updateTime = JSON.parse(
          JSON.stringify(this.taskInfo.updateTime).replace('T', ' ')
        )
        // console.log(res)
        this.form = { ...val }
        this.typeName = this.taskInfo.taskType.typeName
        const ele = await repairerList(val.innerCode)
        this.repairerList = ele
        // console.log(ele)
        this.user = true
      } finally {
        this.loading = false
      }
    },
    // 重新创建
    sb () {
      this.dialog = false
      this.dialogFormVisible = true
      this.user = true
    },
    // 关闭取消
    close () {
      this.dialogFormVisible = false
      this.user = false
      this.FormVisible = false
      this.Visible = false
    },
    // 新建按钮
    updateadd () {
      this.dialogFormVisible = true
      // this.$refs.form.resetFields()
      this.form = {}
    },
    // 取消工单
    hhh () {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await cancel(this.form.taskId)
          console.log(res)
          this.$message({
            type: 'success',
            message: '取消成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 确定按钮
    async submit () {
      try {
        await this.$refs.form.validate()
        await create({
          ...this.form,
          assignorId: 7,
          details: [],
          createType: 1,
          productType: this.form.productTypeId
        })
        this.dialogFormVisible = false
        this.$message.success('创建成功')
      } catch (error) {
        // this.$message.error(error.response.data)
      }
    },
    // 补货清单
    async channelList () {
      const res = await channelList(this.form.innerCode)
      // console.log(res)
      const a = []
      const list = res.map((item) => {
        // console.log(item)
        a.push({
          channelCode: item.channelCode,
          brandName: item.sku?.brandName,
          currentCapacity: item.currentCapacity,
          maxCapacity: item.maxCapacity
        })
        return a
      })
      // console.log(list)
      this.tableData = list[0]
    },
    openbuhuo () {
      this.channelList()
      this.FormVisible = true
    },
    // 获取补货预警值
    async supplyAlert () {
      this.Visible = true
      const res = await supplyAlertValue()
      this.form.num = res
      // console.log(res)
    },
    async autoSupplyConfig () {
      await autoSupplyConfig({ alertValue: this.form.num })
      this.Visible = false
      this.chaxun()
    }
  },
  computed: {
    pic () {
      if (this.form.statusName === '取消') {
        return ''
      } else if (this.form.statusName === '待办') {
        return ''
      } else if (this.form.statusName === '完成') {
        return ''
      } else {
        return ''
      }
    },
    test () {
      if (this.form.statusName === '取消') {
        return '取消'
      } else if (this.form.statusName === '取消') {
        return '待办'
      } else if (this.form.statusName === '完成') {
        return '完成'
      } else {
        return '进行'
      }
    },
    tup () {
      if (this.form.statusName === '取消') {
        return 'https://likede2-admin.itheima.net/img/pic_3.e8208e34.png'
      } else if (this.form.statusName === '待办') {
        return 'https://likede2-admin.itheima.net/img/pic_1.834b274c.png'
      } else if (this.form.statusName === '完成') {
        return 'https://likede2-admin.itheima.net/img/pic_4.3b5af41c.png'
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
.app {
  width: 1810px;
}
.gg {
  margin-top: 20px;
}
.bgc {
  background-color: #f3f6fb;
}
.FooltList {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  .left {
    font-size: 16px !important;
    color: #dbdfe5 !important;
  }
  .right {
    button {
      width: 70px;
      height: 32px;
      margin: 0 16px;
      border-radius: 2px;
      cursor: pointer;
      background: #edf0f9;
      border: none;
    }
  }
}
.active {
  background-color: #d5ddf8 !important;
}
/deep/.el-select .el-input .el-select__caret {
    margin-right: -40px !important;
}
</style>
<style lang="less">
// 滚动条的宽度
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
// 滚动条的滑块
::-webkit-scrollbar-thumb {
  background-color: #a1a3a9;
  border-radius: 4px;
}

.el-card {
  width: 1680px;
  height: 64px;
  .card {
    display: flex;
    margin-top: -8px;
    .box {
      text-align: center;
      margin-right: 15px;
      span {
        font-size: 14px;
        display: inline-block;
        margin-right: 15px;
      }
    }
    button {
      display: flex;
      margin-top: 2px;
      width: 80px;
      height: 36px;
      // line-height: 36px;
      justify-content: center;
      align-items: center;
      // text-align: center;
      background-color: #5f84ff;
      span {
        display: inline-block;
        margin: 0px 6px;
      }
    }
  }
  .el-input {
    width: 206px !important;
    height: 36px;
  }
}
.boxo {
  margin-top: 10px;
  height: 673px;
  .box2 {
    display: flex;
    button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80px !important;
      height: 36px;
    }
    .one {
      background: linear-gradient(135deg, #ff9743, #ff5e20);
      border-color: #ff9743;
    }
    .two {
      background-color: #fbf4f0;
    }
    .el-icon-circle-plus-outline {
      font-size: 16px;
    }
  }
  .box3 {
    margin-top: 20px;
  }
}
.pp {
  color: #4368e1;
  cursor: pointer;
}
.el-dialog {
  border-radius: 10px;
  .el-form {
    display: flex;
    flex-direction: column;
    .el-form-item {
      justify-content: center;
      align-items: center;
    }
  }
}
textarea {
  height: 83px;
}
.dialog-footer {
  margin-top: -40px;
  text-align: center;
  .el-button {
    margin-right: 20px;
  }
  .one {
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    color: #fff;
    border: none;
  }
  .two {
    background-color: #fbf4f0 !important;
    border: none;
    color: #655b56 !important;
  }
}
</style>
